<template>
    <div class="custom-list">        
        <ul class="list-item">
            1、<a href="https://aihome-paper.oss-cn-beijing.aliyuncs.com/aihome-offline.crx"
                target="_blank" class="link">
                点击下载
                <span class="highlight">aihome-offline.crx</span>
            </a>
        </ul>
        <ul class="list-item">
            2、打开Edge浏览器，在地址栏中输入<span class="highlight">edge://extensions/</span>，并且打开<span class="highlight">开发人员模式</span>，如下图：
            <br>
            <img src="@/assets/image/edgeOffline-1.png"
                class="step-image">
        </ul>
        <ul class="list-item">
            3、将下载下来的crx文件，拖拽至当前界面。如下图：
            <br>
            <img src="@/assets/image/edgeOffline-2.png"
                class="step-image">
        </ul>
        <ul class="list-item">
            4、弹出确认框，点击<span class="highlight">添加扩展程序</span>，如下图：
            <br>
            <img src="@/assets/image/edgeOnline-2.png"
                class="step-image-small">
        </ul>
        <ul class="list-item">
            5、添加完成后，点击<span class="highlight">启用</span>，如下图：
            <br>
            <img src="@/assets/image/edgeOffline-4.png"
                class="step-image">
        </ul>
        <ul class="list-item">
            6、打开一个新标签页，第一次会出现弹框，点击<span class="highlight">保持现状</span>，如下图：
            <br>
            <img src="@/assets/image/chromeOnline-3.png"
                class="step-image-small">
        </ul>
       
    </div>

</template>

<style scoped>
/* 列表样式 */
.custom-list {
    display: inline-block;

}

/* 列表项样式 */
.list-item {
    margin-bottom: 1rem;    
}
/* 链接样式 */
.link {
    font-weight: bold;
    text-decoration: none;
    color: white;
}
/* 高亮文本样式 */
.highlight {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    display: inline-block;
    border-radius: 0.375rem;
    background-color: #60a5fa;
    padding: 5px 8px;
}
.step-image {
    margin-top: 1.25rem;
    display: inline-block;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}
/* 步骤图片样式（大屏幕） */
@media (min-width: 1024px) {
    .step-image {
        width: 900px;
    }
}

.step-image-small {
    margin-top: 1.25rem;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}
/* 步骤小图片样式（大屏幕） */
@media (min-width: 1024px) {
    .step-image-small {
        width: 400px;
    }
} 
</style>